<template>
    <!-- <div class="title">
        男模特
    </div> -->
    <div class="button" style="display: flex;">
        <el-button type="primary" :icon="Plus" @click="toAdd">Add</el-button>
        <el-input v-model="name" @keyup.enter="getAllModel" :prefix-icon="Search"
            placeholder="Enter the name of the model" style="width: 200px;margin-left:20px;" </el-input>
    </div>
    <el-table size="large" :data="tableData" style="width: calc(100vw - 280px)">
        <el-table-column fixed prop="name" label="name" width="150" />
        <el-table-column label="headImage" min-width="headImage">
            <template #default="scope">
                <img style="width:50px;height:50px" :src="scope.row.headImage" alt="">
            </template>
        </el-table-column>
        <el-table-column prop="height" label="height" />
        <el-table-column prop="bust" label="bust" />
        <el-table-column prop="waist" label="waist" />
        <el-table-column prop="hips" label="hips" />
        <el-table-column prop="hair" label="hair" />
        <el-table-column prop="eyes" label="eyes" />
        <el-table-column prop="shoes" label="shoes" width="120" />
        <el-table-column fixed="right" label="operate" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
                    Details
                </el-button>
                <el-button link type="primary" size="small" @click="editInfo(scope.row)">Edit</el-button>
                <el-button link type="primary" size="small" @click="deleteModel(scope.row.id)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
        <el-pagination layout="prev, pager, next" :total="pageData.total" v-model:current-page="pageData.current"
            :page-size="7" @current-change="getAllModel" />
    </div>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" top="100px">
        <el-form label-width="100" label-position="top">
            <el-form-item label="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="headImage">
                <el-upload size="large" class="avatar-uploader" :action="baseUrl + '/model/admin/upload'"
                    :show-file-list="false" :headers="headers" name="file" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img style="max-width: 300px;max-height:300px" v-if="imageUrl !== ''" :src="imageUrl"
                        class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="inTown">
                <el-radio-group v-model="formData.inTown">
                    <el-radio :value="0">no</el-radio>
                    <el-radio :value="1">yes</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="height">
                <el-input v-model="formData.height"></el-input>
            </el-form-item>
            <el-form-item label="bust">
                <el-input v-model="formData.bust"></el-input>
            </el-form-item>
            <el-form-item label="waist">
                <el-input v-model="formData.waist"></el-input>
            </el-form-item>
            <el-form-item label="hips">
                <el-input v-model="formData.hips"></el-input>
            </el-form-item>
            <el-form-item label="hair">
                <el-input v-model="formData.hair"></el-input>
            </el-form-item>
            <el-form-item label="eyes">
                <el-input v-model="formData.eyes"></el-input>
            </el-form-item>
            <el-form-item label="shoes">
                <el-input v-model="formData.shoes"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dealAddOrEdit">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addModelAPI, deleteModelAPI, editModelAPI, searchAllInTownModelAPI } from '@/apis/admin';
import { Plus, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import type { UploadProps } from 'element-plus'
import { useUserStore } from '@/stores/userStore';

import { baseUrl } from '@/utils/baseUrl';

const dialogVisible = ref(false)

const router = useRouter()

// 处理编辑和添加

const dialogTitle = ref('Edit the model information')

const tableData = ref([])

const formData = ref({
    id: null,
    "inTown": 1,
    "name": "",
    "headImage": "",
    "sex": 0,
    "height": "",
    "bust": "",
    "waist": "",
    "hips": "",
    "hair": "",
    "eyes": "",
    "shoes": ""
})

const editInfo = (row: any) => {

    formData.value = row
    imageUrl.value = row.headImage

    dialogTitle.value = 'Edit the model information'
    dialogVisible.value = true
}

const toAdd = () => {

    formData.value = {
        id: null,
        "inTown": 1,
        "name": "",
        "headImage": "",
        "sex": 1,
        "height": "",
        "bust": "",
        "waist": "",
        "hips": "",
        "hair": "",
        "eyes": "",
        "shoes": ""
    }

    imageUrl.value = ''

    dialogTitle.value = 'Create a new model'
    dialogVisible.value = true
}

const handleClick = (id: any) => {
    console.log('click')

    router.push('/back/details/' + id)
}

const pageData = ref({
    total: 0,
    current: 1
})

const name = ref('')

const getAllModel = async () => {
    const res = await searchAllInTownModelAPI(pageData.value.current, 7, name.value);

    if (res.data.code === 200) {
        pageData.value.total = res.data.data.total
        tableData.value = res.data.data.rows
    }
    else {
        ElMessage.error(res.data.msg)
    }


}

onMounted(() => {
    getAllModel()
})

// 新建和编辑

const headers = {
    token: useUserStore().getUserInfo().token
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response
) => {
    imageUrl.value = response.data

    formData.value.headImage = response.data
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

const dealAddOrEdit = async () => {
    if (dialogTitle.value === 'Edit the model information') {
        await edit()
    }
    else {
        await add()
    }

    dialogVisible.value = false

    getAllModel()
}

const add = async () => {

    let data = formData.value

    // console.log(data)

    const res = await addModelAPI(data)

    if (res.data.code === 200) {
        ElMessage.success('The new is successful')
    }
    else {
        ElMessage.error(res.data.msg)
    }

}

const edit = async () => {

    let data = formData.value

    const res = await editModelAPI(data)

    if (res.data.code === 200) {
        ElMessage.success('Edited successfully')
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

// 删除

const deleteModel = async (id: number) => {


    const flag = confirm('Are you sure you want to delete the current model?')

    if (flag === false) return

    const res = await deleteModelAPI(id)

    if (res.data.code === 200) {
        ElMessage.success('The deletion is successful')

        getAllModel()
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

</script>

<style lang="scss">
.title {
    // line-height: 40px;
    font-size: 20px;
    // font-weight: bold;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>